<template>
<div :class="[$style.container]" @click="onClick">
  <slot></slot>
</div>
</template>

<script lang="ts">

import { Vue, Component, Provide, Watch, Ref, Prop, Inject } from 'vue-property-decorator'

@Component
export default class ContextMenuItem extends Vue {
  @Inject() close!: () => void

  onClick () {
    if (this.close) this.close()
  }

  $style!: any
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
  height: 24px;
  margin: 2px;
  padding: 4px 16px;
  line-height: 24px;

  &:hover {
    background-color: $bg-body-color;
    cursor: pointer;
  }
}
</style>
